<template>
  <div class="login-container">
    <div class="wrap">
      <div class="left">
        <img src="~assets/img/loginLeft.jpg" />
      </div>
      <div class="right">
        <div class="logo">
          <!-- <img src="~assets/img/login-logo-hb.png" /> -->
          <img :src="logoImg" />
        </div>
        <div class="title">{{ title }}</div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          status-icon
          ref="ruleForm"
          label-position="left"
          label-width="0px"
          class="demo-ruleForm login-page"
        >
          <el-form-item prop="username">
            <el-input
              type="text"
              v-model="ruleForm.username"
              auto-complete="off"
              placeholder="请输入用户名"
              prefix-icon="el-icon-s-custom"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="ruleForm.password"
              auto-complete="off"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
            ></el-input>
          </el-form-item>
          <el-form-item style="width: 100%">
            <el-button
              type="primary"
              style="width: 100%"
              @click="handleSubmit"
              :loading="logining"
              v-if="title == '视频云平台登录'"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { getData, postData } from "@/request/http";
import hanbang from "./../../assets/img/login-logo-hb.png";
import sugon from "./../../assets/img/login-logo-sugon.png";
import shutian from "./../../assets/img/login-logo-shutian.png";

export default {
  name: "Login",
  data() {
    return {
      logining: false,
      title: "视频云平台登录",
      btnText: "登录",
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入正确的用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入正确的密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    if (window.mysocket) {
      window.mysocket.close();
    }
    var that = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        that.handleSubmit();
      }
    };
  },
  computed: {
    /* 
        @desc logo图片
    */
    logoImg() {
      let toCompany = window.toCompany || "";
      if (toCompany == "hanbang" || toCompany == "") {
        return hanbang;
      }
      if (toCompany == "shutian") {
        return shutian;
      }
      if (toCompany == "sugon") {
        return sugon;
      }
    },
  },
  methods: {
    handleSubmit() {
      localStorage.clear();
      sessionStorage.clear();
      window.reStartStatus = true;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.login(); //login
        } else {
          return false;
        }
      });
    },

    /*登录*/
    async login() {
      postData("/adminweb/sys/admin/login", {
        user_name: this.ruleForm.username,
        user_pwd: this.ruleForm.password,
      })
        .then((res) => {
          if (res.code == 0) {
            let pers = res.datas.permissions;
            this.$store.commit("login/setUser", res.datas.user_name);
            this.$store.commit("login/set_nick_name", res.datas.nick_name);
            this.$store.commit("login/set_mobile", res.datas.mobile);
            this.$store.commit("login/set_email", res.datas.email);
            this.$store.commit("login/set_permissions", JSON.stringify(pers));

            localStorage.setItem("username", res.datas.user_name);
            localStorage.setItem("token", res.datas.token);
            localStorage.setItem("nick_name", res.datas.nick_name);
            localStorage.setItem("mobile", res.datas.mobile);
            localStorage.setItem("email", res.datas.email);
            localStorage.setItem("token_expired", res.datas.token_expired);
            localStorage.setItem("permissions", JSON.stringify(pers));
            this.$router.push("/cameraPlay"); //去首页
          } else if (res.code == -56004) {
            this.$message.error("密码有误，请重新输入！");
          } else if (res.code == -56024) {
            this.$message.error("用户名有误，请重新输入！");
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error("error");
        });
    },
    loginChange() {
      this.title = "视频云平台登录";
    },
  },
};
</script>

<style scoped>
html,
body {
  width: 100%;
  height: 100%;
}
.login-container {
  width: 100%;
  height: 100vh;
  background: url("~assets/img/loginBg.jpg") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}
.wrap {
  width: 54%;
  height: 496px;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 10%;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.left {
  width: 45%;
  height: 470px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.left img {
  width: 80%;
  height: 80%;
}
.right {
  flex: 1;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
}
.logo {
  width: 120px;
  height: 50px;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 20px;
}
.logo img {
  width: 100%;
  height: 100%;
  display: inline;
  text-align: center;
}
.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  width: 350px;
  height: 100%;
}
.title {
  margin-bottom: 43px;
  text-align: center;
  font-size: 29px;
}
</style>
